[#include "../../dbadminer/common/html.ftl" /]
[@html]
    [@head_dbadminer title="新建连接" css=["fw"] /]
    [@body]
        [@formMain ]
            <div class="fw-forms">
                [@dataForm formId="form-connect-add" ]
                    <input type="hidden" name="type1" value="${type!}" />
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">连接类型：</label>
                        <select class="am-form-field am-radius" name="type" required>
                            <option value="">-- 请选择 --</option>
                            [#list dict.getType("db_connect_type") as dict]
                                <option value="${dict.dictValue}">${dict.dictLabel}</option>
                            [/#list]
                        </select>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">连接名称：</label>
                        <input class="am-form-field am-radius" type="text" name="name" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">主机：</label>
                        <input class="am-form-field am-radius" type="text" name="host" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">端口号：</label>
                        <input class="am-form-field am-radius" type="text" name="port" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">初始数据库：</label>
                        <input class="am-form-field am-radius" type="text" name="database" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">用户名：</label>
                        <input class="am-form-field am-radius" type="text" name="username" required/>
                    </div>
                    <div class="am-form-group am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <label class="is-required">密码：</label>
                        <input class="am-form-field am-radius password" type="password" name="password" required/>
                        <span class="toggleBtn"></span>
                    </div>
                [/@dataForm]
            </div>
        [/@formMain]

        [@rightToolbar /]

        [@script_dbadminer js=["fw", "validate"] progress="false" ]
            <script type="text/javascript">
                var prefix = ctx + "osfw/dbadminer/connect";

                $("#form-connect-add").validate({
                    rules:{
                    },
                    messages: {
                    },
                    onkeyup: false,
                    focusCleanup: true
                });

                function submitHandler() {
                    if ($.validate.form()) {
                        $.operate.save(prefix + "/add", $('#form-connect-add').serialize());
                        $.modal.msgSuccess("修改成功");
                        $.modal.close();
                    }
                }

                //控制密码框输入和隐藏
                let pswrds = document.querySelectorAll('.password');
                let toggleBtns = document.querySelectorAll('.toggleBtn');
                for (let i = 0; i < toggleBtns.length; i++) {
                    toggleBtns[i].onclick = function () {
                        if (pswrds[i].type === 'password') {
                            pswrds[i].setAttribute('type', 'text');
                            toggleBtns[i].classList.add('hide');
                        } else {
                            pswrds[i].setAttribute('type', 'password');
                            toggleBtns[i].classList.remove('hide');
                        };
                    };
                };
            </script>
        [/@script_dbadminer]
    [/@body]
[/@html]